<!-- 组件说明 -->
<template>
  <div class="store-wrap">
    <goback :targetUrl="'/index/home'" :title="pageName"></goback>
    <div class="topTab">
      <p @click.stop="tabClick(0)" :class="tabIndex == 0 ? 'active' : ''">
        Walker
      </p>
      <p @click.stop="tabClick(1)" :class="tabIndex == 1 ? 'active' : ''">
        Weight
      </p>
    </div>
    <div class="list">
      <div
        @click.stop="showOverlayDom(item, index)"
        class="li"
        v-for="(item, index) in tabContent"
        :key="index"
      >
        <img :src="item.propsIcon" />
        <p>{{ item.propsName }}</p>
        <span v-if="pageName == 'store'">₹ {{ item.propsPrice }}</span>
      </div>
    </div>

    <van-overlay :show="overlayShow" @click.stop="overlayShow = false">
      <div class="overlayWrapper" @click.stop>
        <div class="detail">
          <div class="top">
            <img :src="targetData.propsIcon" />
          </div>
          <div class="contentNumber">
            <p>{{ targetData.propsName }}</p>
            <div class="numberBox">
              <span
                v-for="(item, index) in selectNumberArr"
                :class="selectedNum == item ? 'active' : ''"
                :key="index"
                @click.stop="
                  selectedNum = item;
                  selectInputIfShow = false;
                "
                >{{ item }}</span
              >
            </div>
            <div
              class="iptWrap"
              @click.stop="
                selectedNum = '';
                selectInputIfShow = true;
              "
            >
              <input
                class="ipt"
                v-if="selectInputIfShow"
                autofocus
                type="number"
                v-model.trim="selectedNum"
              />
              <div v-else class="iptTips">
                Please enter any purchase quantity
              </div>
            </div>
            <div v-if="pageName == 'store'" class="totalMY">
              ₹ {{ totalMY }}
            </div>
          </div>
          <div v-if="pageName == 'store'" class="btn" @click.stop="buyFn">
            Buy
          </div>
          <div v-else class="btn" @click.stop="useFn">Use</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import propsController from "../../../api/props-controller/props-controller";
import orderController from "../../../api/order-controller/order-controller";
import { mapState } from "vuex";
import { remNumber } from "../../../utils/remset";

export default {
  name: "store-wrap",
  data() {
    return {
      img: require("@/assets/imgs/index/defaultPic.png"),
      pageName: "",
      tabContent: [],
      overlayShow: false, //弹窗显示状态
      targetData: {
        propsIcon: require("@/assets/imgNews/store/wakler3999.png"),
        propsName: "Walker1",
        propsPrice: "",
        propsId: ""
      },
      tabIndex: 0, //默认就显示的tab1 下标即 0
      selectNumberArr: [1, 5, 10, 20],
      selectInputIfShow: false, //输入框
      selectedNum: 1, //输入框的值

      localIp: ""
    };
  },
  // watch:{
  //   $route(){
  //
  //   }
  // },
  computed: mapState({
    // 箭头函数可使代码更简练
    userStoreData: state => state.user,

    totalMY() {
      let totalMYReturn = 0;
      totalMYReturn = this.targetData.propsPrice * this.selectedNum;
      return totalMYReturn;
    }
  }),
  methods: {
    orderSnStatusCheck(orderSn) {
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.orderController
        .orderQueryorder({
          orderSn: orderSn
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            let { orderStatus, url } = res.data.data;
            if (orderStatus == 0) {
              zs.$toast({
                message: "ordered",
                duration: 2000,
                forbidClick: true
              });
              zs.orderSnStoregeClear(); //TODO:待完善未支付及可支付的交互逻辑
            } else if (orderStatus == 1) {
              zs.$toast({
                message: "paid",
                duration: 2000,
                forbidClick: true
              });
              zs.orderSnStoregeClear();
            } else if (orderStatus == 2) {
              zs.$toast({
                message: "canceled",
                duration: 2000,
                forbidClick: true
              });
              zs.orderSnStoregeClear();
            } else if (orderStatus == 3) {
              zs.$toast({
                message: "Timeout to cancel",
                duration: 2000,
                forbidClick: true
              });
              zs.orderSnStoregeClear();
            }
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    orderSnStoregeClear() {
      window.localStorage.removeItem("orderSn");
    },
    tabClick(index) {
      this.storeAjax(index);
    },
    storeAjax(index) {
      let zs = this;
      let typeEnum = 2;
      if (index == 0) {
        typeEnum = 2;
      } else if (index == 1) {
        typeEnum = 1;
      }
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.propsController
        .propsRecommendList({
          currPage: 1,
          pageSize: 10000,
          typeEnum
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            zs.tabContent = res.data.data.list;
            this.tabIndex = index;
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    useFn() {
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      setTimeout(() => {
        zs.overlayShow = false; //输入框
        zs.selectInputIfShow = false; //输入框
        zs.selectedNum = 1; //输入框的值
        // zs.totalMY = 0;
        zs.$toast.clear();
      }, 1000);
    },
    buyFn() {
      let zs = this;
      this.$toast.loading({
        duration: 0,
        forbidClick: true
      });
      this.api.orderController
        .orderCreateorder({
          clientIp: zs.localIp,
          count: zs.selectedNum,
          price: zs.targetData.propsPrice,
          propsId: zs.targetData.propsId,
          userId: zs.userStoreData.userId
        })
        .then(res => {
          zs.$toast.clear();
          if (res.data.code === 200) {
            zs.overlayShow = false; //输入框
            zs.selectInputIfShow = false; //输入框
            zs.selectedNum = 1; //输入框的值
            zs.$toast.clear(); //TODO:待完善
            let orderSn = res.data.data.orderSn;
            localStorage.setItem("orderSn", orderSn);
            window.StepSDK.jumpUrl(res.data.data.url, "1");//1为app内 非1位app外部浏览器
          } else {
            zs.$toast(res.data.info);
          }
        });
    },
    showOverlayDom(item, index) {
      console.log(index);
      this.targetData = item;
      this.overlayShow = true;
    },
    pageinit() {
      this.tabClick(0);
    }
  },
  mounted() {
    this.pageName = this.$route.name;
    this.pageinit();
    let zs = this;
    zs.localIp = returnCitySN["cip"];

    if (localStorage.getItem("orderSn")) {
      zs.orderSnStatusCheck(localStorage.getItem("orderSn"));
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
@import url("./../../../assets/css/common.less");
.howtomkmn {
  color: #004889;
}
.store-wrap {
  color: #1c1d1e;
  padding: 0 0.3rem;
  .topTab {
    padding: 1.44rem 0 0.4rem;
    display: flex;
    justify-content: start;
    p {
      height: 0.56rem;
      line-height: 0.66rem;
      font-size: 0.32rem;

      font-weight: 400;
      color: #333333;
      opacity: 1;
      position: relative;
      padding: 0 0.2rem;
      &.active {
        color: rgba(51, 51, 51, 1);
        font-size: 0.4rem;
        font-weight: bold;
        line-height: 0.56rem;
        &::after {
          content: "";
          width: 0.4rem;
          height: 0.1rem;
          position: absolute;
          bottom: -0.2rem;
          left: 50%;
          transform: translate(-50%, 0);
          background: linear-gradient(
            rgba(0, 177, 255, 1),
            rgba(0, 137, 255, 1)
          );
          border-radius: 0.1rem;
          overflow: hidden;
        }
      }
    }
  }
  .list {
    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    .li {
      width: 2rem;
      //height: 2.4rem;
      height: auto;
      padding: 0.34rem 0.35rem 0.1rem;
      box-sizing: border-box;
      margin-bottom: 0.2rem;
      background: linear-gradient(
        rgba(216, 255, 247, 1),
        rgba(234, 255, 252, 1)
      );
      border-radius: 0.2rem;
      &:nth-child(2n + 2) {
        background: linear-gradient(
          rgba(255, 248, 216, 1),
          rgba(255, 254, 234, 1)
        );
      }
      &:nth-child(2n + 3) {
        background: linear-gradient(
          rgba(222, 216, 255, 1),
          rgba(222, 216, 255, 1)
        );
      }
      &:nth-child(3n + 2) {
        margin: 0 0.3rem 0.2rem;
      }
      img {
        width: 1.3rem;
        height: 1.3rem;
        margin: 0 auto;
      }
      p,
      span {
        height: 0.33rem;
        font-size: 0.24rem;

        font-weight: bold;
        line-height: 0.33rem;
        color: #333333;
        opacity: 1;
        display: block;
        text-align: center;
      }
      span {
      }
    }
  }

  .overlayWrapper {
    width: 6rem;
    padding-bottom: 0.35rem;
    //height: 7rem;
    border-radius: 0.2rem;
    background-color: #fff;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    .detail {
      width: 100%;
      height: 100%;
      .top {
        background-color: rgba(245, 245, 245, 1);
        padding: 0.55rem 0;
        img {
          width: 1.3rem;
          height: 1.3rem;
          margin: 0 auto;
        }
      }
      .contentNumber {
        padding: 0 0.2rem;
        & > p {
          height: 0.6rem;
          line-height: 0.6rem;
          font-size: 0.28rem;

          font-weight: bold;
          color: #333333;
          opacity: 1;
          text-align: center;
          border-bottom: 1px dashed rgba(112, 112, 112, 1);
        }
        .numberBox {
          padding: 0.3rem 0 0.25rem;
          display: flex;
          justify-content: space-around;
          span {
            display: block;
            width: 1rem;
            height: 0.5rem;
            line-height: 0.5rem;
            background-color: rgba(245, 245, 245, 1);
            border-radius: 0.36em;
            text-align: center;
            cursor: pointer;
            &.active {
              background: #fff8dd;
              border: 2px solid #ffce00;
              line-height: calc(0.5rem - 4px);
              box-sizing: border-box;
              color: rgba(51, 51, 51, 1);
              font-size: 0.28rem;
            }
          }
        }
        .iptWrap {
          padding-bottom: 0.6rem;
          .ipt {
            padding: 0 0.2rem;
            height: 0.5rem;
            line-height: 0.5rem;
            background: rgba(255, 248, 221, 1);
            opacity: 1;
            border-radius: 0.36rem;
            font-size: 0.24rem;

            font-weight: 300;
            color: rgba(51, 51, 51, 1);
            display: block;
            width: 100%;
            box-sizing: border-box;
            border-color: #ffce00;
            //outline-color: transparent;
            outline: none;
            font-weight: bold;
          }
          .iptTips {
            padding: 0 0.2rem;
            height: 0.5rem;
            line-height: 0.5rem;
            background: #f5f5f5;
            opacity: 1;
            border-radius: 0.36rem;
            font-size: 0.24rem;

            font-weight: 300;
            color: #999999;
            display: block;
            width: 100%;
            box-sizing: border-box;
          }
        }
        .totalMY {
          padding: 0 0.4rem;
          text-align: right;
          height: 0.4rem;
          font-size: 0.28rem;

          font-weight: bold;
          line-height: 0.4rem;
          color: #000000;
          opacity: 1;
        }
      }
      & > .btn {
        width: 4rem;
        height: 0.8rem;
        line-height: 0.8rem;
        background: linear-gradient(270deg, #feed55 0%, #ffc400 100%);
        opacity: 1;
        border-radius: 1rem;
        cursor: pointer;
        margin: 0.6rem auto 0;
        font-size: 0.4rem;

        font-weight: bold;
        color: #663929;
        opacity: 1;
        text-align: center;
      }
    }
  }
}
</style>
